<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .control{  width:200px; box-sizing: border-box;  color:white;}
            .content{  width:auto;  margin-left:200px;  height:900px;overflow-y:auto;}
            .fl{  float: left;  }
            .b{  border:1px solid black;  }
            .content-iframe{width:100%;}

            #target > div{border:1px solid silver;}
            .for-column{min-height:50px;border:1px solid silver;}
            .for-column:after{content:'';clear:both;display:block;}
            .for-cell-container{min-height: 100px;min-width:100px;border:1px solid silver;float:left;}

            #toolbox ,.edit ,.operation{box-sizing: border-box;padding:10px;}
            #toolbox >div { color:white;   height: 40px;  border: 1px solid silver;box-sizing: border-box; text-align: center;
                background: #999;line-height:40px;border-radius: 10px;;
            }
            #toolbox >label,.edit label,.operation label{font-size:20px;font-weight: bold;}
            .operation span{display:inline-block;padding:5px;text-align: center;background: #269ABC;cursor:pointer;}

            .edit .modelChoice{ color:white;   height: 40px;  border: 1px solid silver;box-sizing: border-box; text-align: center;
                background: darkcyan;line-height:40px;border-radius: 10px;;
            }


            .cls:after{clear:both;display:block;content:'';}

            .option >span{box-sizing:border-box;}

            .modelChoice{height: 30px;background: mediumpurple;color:white;}
        </style>
        <script type="text/javascript" src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="/public/statics/js/edithtml/EditHtml.js?v=2"></script>
        <script type="text/javascript">

            window.onload = function() {
                editHtml.init({
                    dragedArea: document.getElementById('toolbox'),
                    target: document.getElementById('target'),
                    modelChange:function(){$("#showCurModel").html(editHtml.data.curEditModelId);}
                });

                $("#modelEditor").click(function(){
                    //打开模块编辑框 编辑相关参数
                    $("#editPanel").show();
                    //id对应的模块在数据库中也有所以不需要传
                    $('#editPanel iframe').attr("src","/model/edit/"+editHtml.data.curEditModelId);
                    $("#submit").click(function(){
                        editHtml.parseModel(editHtml.data.curEditModelId,editHtml.data.curModel);
                    });
                });

                $("#submit").click(function(){
                    editHtml.parseModel(editHtml.data.curEditModelId)
                });

                $("#cancel").click(function(){
                    $("#editPanel").css("display","none");
                });

                $("#modelDelete").click(function(){
                    //还要保证后台也要删除
                    $.get('/model/delete/'+editHtml.data.curEditModelId,function(data){
                        alert(data.message);
                        if(data.state=='ok'){
                            $("#"+editHtml.data.curEditModelId).remove();
                        }
                    },'JSON');
                });

                $(".modelChoice").click(function(){
                    if(!editHtml.data.curEditModelId){
                        return alert("还未选中任何页面模块");
                    }
                    var model = $(this).data('model');
                    editHtml.data.curModel = model;
                    $.get("/model/choice/"+editHtml.data.curEditModelId+"/"+model,function(data){
                        if(data.state == 'ok'){
                            //更新模块
                            editHtml.parseModel(editHtml.data.curEditModelId,model);
                        }
                    },'JSON');
                });

                $("#saveContent").click(function(){
                    var title = $("#title").val();
                    if(!title){
                        alert('请输入保存的名字');
                        return ;
                    }
                    var id = $("#id").val();

                    //保存之前去掉当前选中模块的 样式
                    var content = editHtml.getContent();
                    $.post('/model/save',{title:title,content:content,id:id},function(data){
                        alert(data.message);
                    },'JSON');
                });
            }


        </script>
    </head>
    <body style="margin:0;padding:0;">
        <div style="height:40px;background:#333;color:white;line-height:40px;padding-left:50px;"><span style="font-size:25px;">可视化网页编辑</span></div>
        <!--左边工具 右边容器 清楚明了-->
        <div style="width: 100%;">
            <div class="control fl " >
                <div id="toolbox" class="cls" style="background: silver;">
                    <label>布局容器</label>
                    <div draggable="true" content="columnContent">行</div>
                    <div draggable="true" content="cellContainer">列</div>
                    <label>模块容器</label>
                    <div draggable="true" content="cellContent">模块</div>
                </div>
                <div class="edit" style="background: silver;">

                    <div>
                        <label>模块列表</label>
                        <div class="modelChoice" data-model="ImageText">简单图文</div>
                        <div class="modelChoice" data-model="EditHtml">文章模块</div>
                    </div>

                    <label style="font-size:14px;font-weight: 100;">当前模块:<br /><span id="showCurModel" style="color:red;">未选中任何模块</span></label>

                </div>
                <div style="background: #c0c0c0;" class="operation">
                    <label>操作</label>
                    <div class="option">
                        <span id="modelEditor" style="width:50%;">编辑</span><span id="modelDelete"  style="width:50%;background: darkred;">删除</span>
                    </div>
                    <span id="saveContent"  style="float:left;">保存</span>
                    <input type="text" value="@if(isset($page)){{$page->title}}@endif" placeholder="模版的名字" id="title" style="width:122px;padding:6px;"/>
                    <input type="hidden" value="@if(isset($page)){{$page->id}}@endif" id="id" />
                </div>
            </div>
            <div id="target" class="content  " style="border:1px solid silver;" >
                @if(isset($page)){!! $page->content !!}@endif
            </div>
        </div>

        <div id="editPanel" style="position:fixed;left:50%;top:50%;width:730px; border-radius: 5px;;height:630px;border:1px solid silver;margin-left:-375px;margin-top:-315px;display: none;">
            <div style="background: darkcyan;padding: 5px;color: white;">模块参数编辑面板</div>
            <iframe src="" style="width:100%;height:558px;border:0;" ></iframe>
            &nbsp;&nbsp;&nbsp;<button id="submit" style="border: 0;background: #269ABC;color: white;padding: 8px;" >确定</button>
            <button id="cancel" style="border: 0;background: darkred;color: white;padding: 8px;" >取消</button>
        </div>
    </body>

</html>